<template>
    <div>
        名称:<input type="text" v-model="add_name"><br>
        类型:<input type="text" v-model="add_type"><br>
        价格:<input type="text" v-model="add_price"><br>
        <button @click="add">添加</button><br>
        <input type="text" placeholder="通过id查询" v-model="Searchid"> <el-button circle  @click="Search"> 
                            <el-icon><Search /></el-icon>
                             </el-button>   
      <table border="1" style="width: 100%;text-align: center;">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>类型</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in arr" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.type}}</td>
                <td>{{item.price}}</td>
                <td> 
                  <!-- 方法1：使用标签形式（推荐） -->
                  <el-button type="danger" circle @click="del(item.id)">
                    <el-icon><Delete /></el-icon>
                  </el-button>   
                  <el-button type="primary" circle @click="update(item.id)">
                    <el-icon><Edit/></el-icon>
                  </el-button>  
                </td>
            </tr>
        </tbody>
      </table>
      <div v-if="is" class="isbox">
        名称:<input type="text"><br>
        类型:<input type="text"><br>
        价格:<input type="text"><br>
        <button>确定</button>
      </div>
    </div>
</template>

<script>
import { getlist,addlist,dellist,searchlist,updatelist } from '@/utils/https';
import { onMounted, ref } from 'vue';

export default {
    setup(){ 
       let updateid = ref()
       let is = ref(false)
       let add_name = ref()
       let add_price = ref()
       let add_type = ref()
       let Searchid = ref() 
       const arr = ref([]);
       //渲染   
       function apply(){
         getlist()
        .then(val => {
           arr.value = val.data;
        })
        .catch(e => {
            console.log(e);
        });
       }
       //添加     
       function add(){
         addlist({
            name:add_name.value,
            type:add_type.value,
            price:add_price.value
         })
         .then(() =>{
            apply()
         })
         .catch(e =>{
            console.log(e);
         })
       }
       //删除
       function del(id){
          dellist(id)
          .then(()=>{
            apply()
          })
          .catch(e=>{
            console.log(e);
          })
       }   
       //搜索
       function Search(){
          searchlist(Searchid.value)
          .then(val=>{
            arr.value = Array(val.data)
            console.log(val.data);
          })
          .catch(e=>{
            console.log(e);
          })
       } 
       //修改
       function update(id){
           updateid.value = id
           is.value = true
       }
       //确认修改

       onMounted(() => {
        apply();
       });
       
       return {
         arr,
         apply,
         add,
         add_name,
         add_price,
         add_type,
         del,
         Search,
         Searchid,
         is,
         update,
       };
    }
}
</script>
<style>
.isbox{
  width: 300px;
  height: 200px;
  position: fixed;
  top: 45%;
  left: 40%;
  background-color: aqua;
}
</style>